<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
      }
	
	.amap-ui-control-theme-my-zoomde.amap-ui-control-position-lt{ top:0px; left:0px;}
	.amap-ui-control-theme-my-zoomde.amap-ui-control-position-lt .amap-ui-control-zoom {width: 30px;}
	.amap-ui-control-theme-my-zoomde.amap-ui-control-position-lt a.zoom-btn{ background-color:#fff; color:#db6c29;width: 30px; line-height:30px; height:30px;font-size: 20px;}
	
    </style>
    <title>地图小工具使用</title>
  </head>
  <body>
  	<!--地图-->
  	<div style="position:relative;width:100%;height:70%;">
    	<div id="container" tabindex="0" style="width:100%;height:70%;""></div>
    </div>
    <!--操作-->
	<script type="text/javascript" src="zepto.js"></script>
    <script type="text/javascript" src="b.js"></script>
    <script type="text/javascript" src="c.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=9a621a769237615e36fe158651cc8e1f"></script>
    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script>
    <script type="text/javascript">
    	    //创建地图
			var map = new AMap.Map('container');
			map.setZoom(10);
			map.setCenter([116.39,39.9]);
			
			AMap.event.addListener(map,'zoomend',function(){
				console.log("当前缩放级别："+map.getZoom());
			});
			
			AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {

				var zoomCtrl1 = new BasicControl.Zoom({
						position: 'lt', //left top，左上角
						theme: 'my-zoomde'
					});
		
				map.addControl(zoomCtrl1);
		
			});
			
			
			
	
    </script>
  </body>
</html>
